<template>
  <div class="flex">
    <div class="tableManage w-100%">
      <ContentWrap>
        <!-- <div class="search-form">
          <Search
            :schema="allSchemas.searchSchema"
            @reset="setSearchParams"
            @search="setSearchParams"
          />
        </div>

        <ElDivider /> -->


        <Table
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :columns="allSchemas.tableColumns"
          :data="dataList"
          :loading="loading"
          @register="tableRegister"
          :pagination="{
            total,
          }"
        />
      </ContentWrap>
    </div>
    <Dialog width="65%" v-model="dialogVisible" :title="dialogTitle">


      <Detail
        v-if="actionType === 'detail'"
        :detail-schema="allSchemas.detailSchema"
        :current-row="currentRow"
      />

      <template #footer>

        <BaseButton @click="dialogVisible = false"> 关闭 </BaseButton>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="tsx">

import {
  ref,
  unref,
  reactive,
  watch,
  computed,
  onMounted,
  defineProps,
  withDefaults,
  ComponentRef,
} from "vue";
import { ContentWrap } from "@/components/ContentWrap";
import { Table } from "@/components/Table";
import { useTable } from "@/hooks/web/useTable";
import { Search } from "@/components/Search";
import { useValidator } from "@/hooks/web/useValidator";

import Detail from "./components/iSoftwareDetail.vue";
import { Dialog } from "@/components/Dialog";
import { CrudSchema, useCrudSchemas } from "@/hooks/web/useCrudSchemas";
import { BaseButton } from "@/components/Button";
import { useDictionaryStore } from "@/store/modules/dictionaryStore";


import {  View} from "@element-plus/icons-vue";
const dictionaryStore = useDictionaryStore();


const { required } = useValidator();
interface CurrentNodeTask {
  deviceCode?: string;
  deviceName?: string;
  missionCode?: string;
  // 根据实际需要添加其他属性
}
interface Props {
  currentNodeTask?: CurrentNodeTask;
  type?: string;
}
// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
  currentNodeTask: () => ({}),
  type: undefined
});
// 使用计算属性确保值的安全性
const safeCurrentNodeTask = computed(() =>
  props.currentNodeTask && typeof props.currentNodeTask === 'object'
    ? props.currentNodeTask
    : {}
);
const deviceCode = ref(safeCurrentNodeTask.value.deviceCode ?? '');
const currentNodeName = ref(safeCurrentNodeTask.value.deviceName ?? '');
const missionCode = ref(safeCurrentNodeTask.value.missionCode ?? '');



const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState;


    if (!deviceCode.value || !missionCode.value) {
      return {
        list: [],
        total: 0,
      };
    }
     const collectorUserCode = localStorage.getItem("collectorUserCode");

    const res = await "/cImportedSoftwares/page".get({
      deviceCode: deviceCode.value,
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams),
        createby: collectorUserCode || "",

      missionCode: missionCode.value,
      isLockTask:1,
    });
    return {
      list: res.data.records || [],
      total: res.data.total || 0,
    };
  }

});
const { total, loading, dataList, pageSize, currentPage } = tableState;
const { getList } = tableMethods;
// 监听 props 变化
watch(
  () => props.currentNodeTask,
  (newVal, oldVal) => {
    try {
      console.log(newVal, oldVal, "currentNodeTask");
      deviceCode.value = newVal?.deviceCode ?? '';
      currentNodeName.value = newVal?.deviceName ?? '';
      missionCode.value = newVal?.missionCode ?? '';

      // 只有在有设备代码时才调用 getList
      if (newVal?.deviceCode && newVal?.missionCode) {
        getList();
      }
    } catch (error) {
      console.error('Error in currentNodeTask watcher:', error);
      // ElMessage.error('数据加载失败');
    }
  },
  { immediate: true } // 添加 immediate 确保初始执行
);


const isAcceptOptions = computed(() => {
  return dictionaryStore.dictionaries.get(
    dictionaryStore.DICTIONARY_TYPES.IS_ACCEPT
  ) || [];
});

const isHighlyCriticalOptions = computed(() => {
  return dictionaryStore.dictionaries.get(
    dictionaryStore.DICTIONARY_TYPES.YORN
  ) || [];
});
// 对外依存度选项
const dependencyOptions = computed(() => {
  return dictionaryStore.dictionaries.get(
    dictionaryStore.DICTIONARY_TYPES.EXTERNAL_DEPENDENCE
  ) || [];
});
// 进口基础产品解决途径
const solutionPlanOptions = computed(() => {
  return dictionaryStore.dictionaries.get(
    dictionaryStore.DICTIONARY_TYPES.SOLUTION_PLAN
  ) || [];
});



const crudSchemas = reactive<CrudSchema[]>([
  {
    field: "selection",
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true },
    table: { type: "selection", hidden: true },
  },
  {
    field: "index",
    label: "序号",
    form: { hidden: true },
    search: { hidden: true },
    detail: { hidden: true },
    table: { type: "index" },
  },
  {
    field: "account",
    label: "所属设备",
    width: 90,
    search: { hidden: true },
    form: {
      component: "Input",
      value: currentNodeName.value,
      componentProps: {
        placeholder: "请输入所属设备",
        disabled: true,
      },
    },
    table: { hidden: true },
  },
  {
    field: "productCategory",
    label: "进口基础产品类别",
    width: 140,
    form: {
      formItemProps: {
        rules: [
          { required: true, message: "请输入进口基础产品类别" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入进口基础产品类别" },
        ],
      },
      componentProps: { placeholder: "请输入进口基础产品类别" },
    },
    search: { hidden: true },
  },
  {
    field: "basicProductName",
    label: "进口基础产品名称",
    width: 150,
    form: {
      formItemProps: {
        rules: [
          { required: true, message: "请输入基础产品名称" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入基础产品名称" },
        ],
      },
      componentProps: { placeholder: "请输入基础产品名称" },
      colProps: { span: 24 },
    },
    detail: { span: 24 },
    search: {
      component: "Input",
      label: "",
      hidden: false,
      componentProps: { placeholder: "基础产品名称" },
    },
  },
     {
    field: "productVersion",
    label: "进口基础产品版本号",
    width: 150,
    search: {
      component: "Input",
      label: "",
      hidden: true,
      componentProps: { placeholder: "进口基础产品版本号" },
    },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入进口基础产品版本号" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入进口基础产品版本号" },
        ],
      },
      componentProps: { placeholder: "请输入进口基础产品版本号" },
    },
  },
    {
    field: "quantityPerProduct",
    label: "单个设备使用该产品数量",
    width: 90,
    search: { hidden: true },
    table: { hidden: true },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入单个设备使用该产品数量" },
          {
            validator: (rule, value, callback) => {
              if (value < 0) {
                return callback(new Error("输入值不能低于 0"));
              }
              callback();
            },
          },
        ],
      },
      componentProps: {
        type: "number",
        placeholder: "请输入单个设备使用该产品数量",
        min: 0,
      },
    },
  },
    {
    field: "mainTechnicalIndicators",
    label: "进口基础产品主要技术指标",
    width: 90,
    search: { hidden: true },
    table: { hidden: true },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入进口基础产品主要技术指标" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入进口基础产品主要技术指标" },
        ],
      },
      componentProps: { placeholder: "请输入进口基础产品主要技术指标" },
      colProps: { span: 24 },
    },
    detail: { span: 24 },
  },
  {
    field: "manufacturer",
    label: "进口基础产品制造商",
    width: 150,
    search: {
      component: "Input",
      label: "",
      hidden: false,
      componentProps: { placeholder: "进口基础产品制造商" },
    },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入进口基础产品制造商" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入进口基础产品制造商" },
        ],
      },
      componentProps: { placeholder: "进口基础产品制造商" },
    },
  },
   {
    field: "benchmarkImportRegion",
    label: "进口基础产品国家/地区",
    width: 150,
    search: { hidden: true },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入进口基础产品国家/地区" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入进口基础产品国家/地区" },
        ],
      },
      componentProps: { placeholder: "请输入进口基础产品国家/地区" },
      colProps: { span: 12 },
    },
    table: { hidden: true },
    detail: { span: 12 },
  },
  {
    field: "isCoreKeyProduct",
    label: "是否核关高",
    width: 120,
    form: {
      component: "Select",
      value: "",
      formItemProps: {
        rules: [{ required: true, message: "请选择是否核关高" }],
      },
      componentProps: { options: isHighlyCriticalOptions },
    },
    search: {
      component: "Select",
      label: "是否核关高",
      hidden: false,
      componentProps: {
        placeholder: "是否核关高",
        options: isHighlyCriticalOptions,
      },
    },
  },
   {
    field: "externalDependence",
    label: "对外依存度",
    width: 90,
    search: { hidden: true },
    table: { hidden: true },
    form: {
      component: "Select",
      value: "",
      componentProps: {
        placeholder: "对外依存度",
        options: dependencyOptions,
      },
      formItemProps: {
        rules: [{ required: true, message: "请选择对外依存度" }],
      },
    },
  },
    {
    field: "solutionPlan",
    label: "进口基础产品解决途径",
    width: 80,
    table: { hidden: true },
    search: {
      component: "Select",
      label: "",
      hidden: true,
      componentProps: {
        placeholder: "进口基础产品解决途径",
        options: solutionPlanOptions,
      },
    },
    form: {
      component: "Select",
      formItemProps: {
        rules: [{ required: true, message: "请选择进口基础产品解决途径" }],
      },
      componentProps: {
        placeholder: "请选择进口基础产品解决途径",
        options: solutionPlanOptions,
      },
    },
  },
   {
    field: "supplier",
    label: "进口基础产品供货商",
    width: 170,
    search: {
      component: "Input",
      label: "",
      hidden: false,
      componentProps: { placeholder: "进口基础产品供货商" },
    },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入进口基础产品供货商" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入进口基础产品供货商" },
        ],
      },
      componentProps: { placeholder: "请输入进口基础产品供货商" },
    },
  },
      {
    field: "launchTime",
    label: "进口基础产品上市时间",
    width: 80,
    search: {
      component: "Input",
      label: "",
      hidden: true,
      componentProps: { placeholder: "进口基础产品上市时间" },
    },
    form: {
      component: "DatePicker",
      formItemProps: {
        rules: [{ required: true, message: "请选择进口基础产品上市时间" }],
      },
      componentProps: {
        type: "month",
        valueFormat: "YYYY-MM", // 添加这一行
        placeholder: "请输入进口基础产品上市时间",
      },
    },
    table: { hidden: true },
  },
    {
    field: "referencePrice",
    label: "参考价格(万元)",
    width: 120,
    search: { hidden: true },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入参考价格" },
          {
            validator: (rule, value, callback) => {
              if (value < 0) {
                return callback(new Error("输入值不能低于 0"));
              }
              callback();
            },
          },
        ],
      },
      componentProps: {
        type: "number",
        placeholder: "请输入参考价格",
        min: 0,
      },
    },
  },
    {
    field: "basicProductUser",
    label: "进口基础产品使用负责人",
    width: 80,
    search: { hidden: true },
    table: { hidden: true },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入进口基础产品使用负责人" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入进口基础产品使用负责人" },
        ],
      },
      componentProps: { placeholder: "请输入进口基础产品使用负责人" },
    },
  },
  {
    field: "userContactInfo",
    label: "进口基础产品使用人联系方式",
    width: 90,
    search: { hidden: true },
    table: { hidden: true },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入进口基础产品使用人联系方式" },
          { pattern: /^[0-9]{11}$/, message: "请输入正确的进口基础产品使用人联系方式" },
        ],
      },
      componentProps: { placeholder: "请输入进口基础产品使用人联系方式" },
    },
    detail: { span: 12 },
  },



  {
    field: "domesticProductName",
    label: "对标典型国产产品名称",
    width: 140,
    search: { hidden: true },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入对标典型国产产品名称" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入对标典型国产产品名称" },
        ],
      },
      componentProps: { placeholder: "请输入对标典型国产产品名称" },
    },
  },
    {
    field: "domesticProductSpecification",
    label: "对标典型国产产品规格",
    width: 80,
    search: { hidden: true },
    table: { hidden: true },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入对标典型国产产品规格" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入对标典型国产产品规格" },
        ],
      },
      componentProps: { placeholder: "请输入对标典型国产产品规格" },
    },
  },

  {
    field: "domesticProductIsAcceptance",
    label: "对标典型国产产品是否鉴定/验收",
    width: 150,
    search: {
      component: "Input",
      label: "",
      hidden: true,
      componentProps: { placeholder: "请输入对标典型国产产品是否鉴定/验收" },
    },
    form: {
      component: "Select",
      formItemProps: {
        rules: [
          { required: true, message: "请输入对标典型国产产品是否鉴定/验收" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入对标典型国产产品是否鉴定/验收" },
        ],
      },
      componentProps: { placeholder: "请输入对标典型国产产品是否鉴定/验收",options:isAcceptOptions },
    },
    table: { hidden: true },
  },
  {
    field: "domesticProductIdentificationUnit",
    label: "对标典型国产产品鉴定/验收单位",
    width: 150,
    search: {
      component: "Input",
      label: "",
      hidden: true,
      componentProps: { placeholder: "请输入对标典型国产产品鉴定/验收单位" },
    },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入对标典型国产产品鉴定/验收单位" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入对标典型国产产品鉴定/验收单位" },
        ],
      },
      componentProps: { placeholder: "请输入对标典型国产产品鉴定/验收单位" },
    },
    table: { hidden: true },
  },
    {
    field: "domesticProductDevelopmentUnit",
    label: "对标典型国产产品研制单位",
    width: 150,
    search: {
      component: "Input",
      label: "",
      hidden: true,
      componentProps: { placeholder: "请输入对标典型国产产品研制单位" },
    },
    detail: { span: 24 },
    form: {
      component: "Input",
      colProps: { span: 24 },
      formItemProps: {
        rules: [
          { required: true, message: "请输入对标典型国产产品研制单位" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入对标典型国产产品研制单位" },
        ],
      },
      componentProps: { placeholder: "请输入对标典型国产产品研制单位" },
    },
    table: { hidden: true },
  },
  {
    field: "domesticProductPersonInCharge",
    label: "对标典型国产产品负责人",
    width: 140,
    search: { hidden: true },
    form: {
      component: "Input",
      formItemProps: {
        rules: [
          { required: true, message: "请输入对标典型国产产品负责人" },
          { pattern: /^(?!\s*$)(?!\/+$).+$/, message: "请输入对标典型国产产品负责人" },
        ],
      },
      componentProps: { placeholder: "请输入对标典型国产产品负责人" },
    },
  },
  {
    field: "domesticProductContactInfo",
    label: "对标典型国产产品联系方式",
    width: 150,
    search: { hidden: true },
    table: { hidden: true },
    form: {
      component: "Input",
      componentProps: { placeholder: "请输入对标典型国产产品联系方式" },
      formItemProps: {
        rules: [
          { required: true, message: "请输入对标典型国产产品联系方式" },
          { pattern: /^[0-9]{11}$/, message: "请输入正确的对标典型国产产品联系方式" },
        ],
      },
      colProps: { span: 12 },
    },
  },
  {
    field: "remarks",
    label: "备注",
    width: 90,
    search: { hidden: true },
    detail: { span: 24 },
    form: {
      component: "Input",
      componentProps: {
        type: "textarea",
        rows: 3,
        placeholder: "请输入备注信息",
      },
      colProps: { span: 24 },
    },
    table: { hidden: true },
  },

  {
    field: "action",
    label: "操作",
    fixed: "right",
    form: {
      hidden: true,
    },
    detail: {
      hidden: true,
    },
    search: {
      hidden: true,
    },
    table: {
      width: 80,
      fixed: "right", // 这里也需要添加
      slots: {
        default: (data: any) => {
          const row = data.row ;
          return (
            <>
              <div style="display:flex;color: var(--el-color-primary)">

                <div class="flex-1 cursor-pointer" onClick={() => action(row, "detail")}>
                  {" "}
                  <el-icon>
                    <View />
                  </el-icon>
                  查看
                </div>

              </div>
            </>
          );
        },
      },
    },
  },
]);

const { allSchemas } = useCrudSchemas(crudSchemas);




const searchParams = ref({});
const setSearchParams = (params: any) => {
  currentPage.value = 1;
  searchParams.value = params;
  getList();
};

const dialogVisible = ref(false);
const dialogTitle = ref("");

const currentRow = ref();
const actionType = ref("");






const action = (row: any, type: string) => {
  dialogTitle.value =  "查看";
  actionType.value = type;
   currentRow.value = {
    ...row,
    account: currentNodeName.value // 确保所属设备字段有值
  };
  dialogVisible.value = true;
};
onMounted(async () => {
  // 检查是否有有效数据
   if (safeCurrentNodeTask.value.deviceCode && safeCurrentNodeTask.value.missionCode) {
    getList();
  }
});

</script>

<style scoped lang="less">
.el-card {

}
.operIcon {
  width: 20px !important;
}
:deep(.el-divider--horizontal) {
  margin: 5px 0 15px 0;
}
.mb-10px {
  display: flex;

}
.opBtn-upload {
  display: inline-block;
  margin: 0 12px;
}
:deep(.el-card__body ){
  padding: 10px  0 !important;
}
</style>
